<template>
<div>
  <el-row :gutter="10">
    <el-col :span="16">
      <el-tag>线索ID：{{id}}</el-tag>
      <el-descriptions class="margin-top" title="带边框列表" :column="2"  border>
        <el-descriptions-item >
          <template slot="label">
            <i class="el-icon-user"></i>
            创建时间
          </template>
          {{form.createTime}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{form.phone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            渠道来源
          </template>
          {{selectDictLabel(this.dict.type.clues_item,form.channel)}}
          {{form.channel}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            线索归属
          </template>
          <el-tag size="small">{{form.owner}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            活动信息
          </template>
          江苏省苏州市吴中区吴中大道 1188 号
        </el-descriptions-item>
      </el-descriptions>

      <el-row type="flex" justify="end">
        <el-col :span="6">
          <el-button v-if="(form.status==1 || form.status==2) && form.falseCount<3" size="mini" type="danger" @click="handleFalseClue">伪线索</el-button>
          <el-button v-if="(form.status==1 || form.status==2)" size="mini" type="success" @click="handtransform">转商机</el-button>
        </el-col>

      </el-row>

      <el-tag>更新线索</el-tag>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px" :disabled="disabled">
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="客户姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入客户姓名"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-select  clearable placeholder="请输入性别" v-model="form.sex"  @keyup.enter.native="handleQuery">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="form.age"  placeholder="请输入年龄" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="微信号" prop="weixin">
              <el-input v-model="form.weixin"  placeholder="请输入微信号" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="qq号" prop="qq">
              <el-input v-model="form.qq" placeholder="请输入qq号" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="意向等级" prop="level">
              <el-select  clearable placeholder="请输入意向等级" v-model="form.level"  @keyup.enter.native="handleQuery">
                <el-option v-for="item in dict.type.clues_level" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="意向科学" prop="subject">
              <el-select  clearable placeholder="请输入意向科学" v-model="form.subject"  @keyup.enter.native="handleQuery">
                <el-option v-for="item in dict.type.course_subject" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下次跟进时间" prop="nextTime">
              <el-date-picker
                v-model="form.nextTime"
                type="datetime"
                placeholder="下次跟进时间">
              </el-date-picker>

            </el-form-item>

          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="12">

            <el-form-item label="跟进记录" prop="type">
              <el-input v-model="form.record" type="textarea" placeholder="请输入跟进记录" />

            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item>
              <el-button v-if="(form.status==1 || form.status==2) && !disabled" type="primary" @click="submitForm">保存</el-button>
              <el-button type="primary" @click="$emit('cancel')">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-col>

    <el-col :span="8">
    <track-list :id="id" :key="trackListkey"></track-list>
    </el-col>
  </el-row>

  <false-clue ref="falseClueDialog" @success="handleSuccess"></false-clue>

</div>
</template>
<script>
  import { getClue } from '@/api/crm/clue';
  import {addClueTrack,transform2Business} from '@/api/crm/clueTrack';
  import TrackList from "@/views/crm/clue/components/track-list"
  import FalseClue from "@/views/crm/clue/components/false-clue"
  import { transform } from '@/api/crm/clueTrack';
  export default {
        name: "track-index",
      props:{
        clueId:{type:[String,Number],},
        view:{ type:Boolean },
      },
      components:{ TrackList, FalseClue },
     dicts:[ 'sys_user_sex' , 'clues_level', 'course_subject' ,'clues_item'],
      data(){
          return {
             id:this.clueId,
            form: {},
            rules: {},
            trackListkey : 0,
            disabled:false,
          }
      },
      watch: {
        clueId(newValue,oldValue){
          this.id=newValue
          this.getList()
        },
        view: {
          handler: function (newValue, oldCalue) {
            this.disabled = newValue;
          },
          immediate:true
      }
    },
      created() {
        this.getList();

      },
      methods: {
        getList(){
          getClue(this.id).then(resp=>{
            this.form=resp.data;
          })
          this.trackListkey++;
        },
        //添加sys_oper_log
        submitForm(){
          addClueTrack(this.form).then(resp =>{
            this.$message.success('操作成功')
            this.getList();
            //通知父组件
            this.$emit('success')
          })

        },
        //伪线索
        handleFalseClue(){
          this.$refs.falseClueDialog.open=true;
          this.$refs.falseClueDialog.id=this.id;
          this.$refs.falseClueDialog.resetForm();
        },
        //转商机
        handtransform(){
          this.$msgbox.confirm(`确定转换线索${this.id}到商机吗?`).then(()=>{
            transform2Business({id:this.id,record:'转商机'}).then(resp=>{
              this.handleSuccess();
            })
          })
        },
        handleSuccess(){
          this.$message.success('操作成功');
          this.getList();
          //通知父组件
          this.$emit('success')
        }

      }

    }
</script>

<style scoped>

</style>
